<template>
	<view class="wrapper souSuo">
		<div class="center input-box mb35">
			<input type="text" placeholder="请输入服务关键词" class="flex1 f28" placeholder-class="c999" v-model="keyword" />
			<image src="../../../static/shouye/search.png" mode="widthFix" class="search-icon"></image>
		</div>
		<!-- 搜索历史 -->
		<div class="space-between">
			<div class="f28">搜索历史</div>
			<image src="../../../static/shouye/delete.png" mode="widthFix" class="delete-icon" @click="remove"></image>
		</div>
		<div class="flex-start fWrap">
			<div class="box f24 mr40 mt25">养老保险</div>
		</div>
		<!-- 搜索结果 -->
		<div class="result-box f28 posr mt30">
			就业登记
			<div class="posa f20 cfff">办事指南</div>
		</div>
		<div class="result-box f28 posr mt30">
			就业登记
			<div class="posa f20 cfff">办事指南</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ''
			}
		},
		methods: {
			remove() {
				this.showModal('确认清空搜索历史吗？').then(r => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.result-box {
		padding: 34rpx 40rpx;
		background: #F1F9FE;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;

		.posa {
			top: 0;
			right: 0;
			padding: 2rpx 26rpx;
			background: linear-gradient(180deg, #1078FF 0%, #62A4FE 100%);
			border-radius: 0rpx 12rpx 0rpx 12rpx;
		}
	}

	.box {
		padding: 8rpx 16rpx;
		background: #F1F9FE;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.delete-icon {
		width: 31.5rpx;
		height: 33.7rpx;
	}

	.input-box {
		width: 672rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		border: 2rpx solid #E6E6E6;
		padding: 0 18rpx 0 22rpx;

		.search-icon {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.souSuo {
		padding: 38rpx;
	}
</style>